﻿<phone:PhoneApplicationPage 
    x:Class="ThuPhap.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="728" 
    
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:TelexTextBox="clr-namespace:Telex;assembly=Telex"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    toolkit:TiltEffect.IsTiltEnabled="True"
    shell:SystemTray.IsVisible="False" xmlns:my="clr-namespace:ThuPhap.Controls">

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>
    <!--LayoutRoot is the root grid where all page content is placed-->
    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="DragDropTextControlStyle" TargetType="my:TextControl">
            <Setter Property="toolkit:GestureService.GestureListener">
                <Setter.Value>
                    <toolkit:GestureListener DragDelta="GestureListener_DragDelta" DragStarted="GestureListener_DragStarted" DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="SelectedBorderStyle" TargetType="Border">
            <Setter Property="Opacity" Value="0"/>
            <Setter Property="Margin" Value="0,10,0,0"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Width" Value="50"/>
            <Setter Property="Background">
                <Setter.Value>
                    <RadialGradientBrush>
                        <GradientStop Color="Black" Offset="1"/>
                        <GradientStop Color="White"/>
                    </RadialGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>
    <Grid x:Name="LayoutRoot" Margin="0,0,0,1">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--ContentPanel - place additional content here-->
        <StackPanel Grid.Row="1" Margin="0,0,0,0">
            <Border Grid.Row="1" Margin="0,0,0,0">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="0">
                        <StackPanel Height="82" VerticalAlignment="Center" Background="{Binding ElementName=StackPanelFontSize, Path=Background}" Margin="0,0,-5,4">
                            <TextBlock Margin="10,15,0,0" FontSize="35" x:Name="ApplicationTitle" VerticalAlignment="Center" FontFamily="{StaticResource Font_TMC_Ong_Do}" Text="Vietnamese  calligraphy" Style="{StaticResource PhoneTextNormalStyle}"/>
                        </StackPanel>
                        <Canvas Margin="0,0,0,0" x:Name="MainCanvas" Width="480" Grid.Column="0" Height="800">
                            <Canvas.Background>
                                <ImageBrush Stretch="Fill" x:Name="BackgroundImage"/>
                            </Canvas.Background>
                            <Canvas.RenderTransform>
                                <ScaleTransform ScaleX="0.80" ScaleY="0.80"/>
                            </Canvas.RenderTransform>
                        </Canvas>
                    </StackPanel>

                    <ScrollViewer Margin="0,0,0,0" Grid.Column="1" Height="725" VerticalAlignment="Top">
                        <StackPanel Margin="3,0,0,0" Grid.Column="1">
                            <StackPanel Margin="4,0,0,2" Background="{Binding ElementName=StackPanelFontSize, Path=Background}" Width="90" MinHeight="80">
                                <toolkit:ListPicker Margin="0,0,0,0" Width="57" SelectionChanged="TypeInputListPicker_SelectionChanged" x:Name="TypeInputListPicker"  SelectedIndex="0" HorizontalAlignment="Center" FlowDirection="LeftToRight">
                                    <toolkit:ListPickerItem Content="EN"/>
                                    <toolkit:ListPickerItem HorizontalAlignment="Left" HorizontalContentAlignment="Left" FontSize="24" Margin="-10,0,-10,0" Content="Telex"/>
                                    <toolkit:ListPickerItem Margin="-5,0,0,0" Content="VNI"/>
                                </toolkit:ListPicker>
                                <TextBlock FontSize="16" Margin="-2,0,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="input"/></TextBlock>
                            </StackPanel>
                            <!--Font size-->
                            <StackPanel Name="StackPanelFontSize" Style="{StaticResource ControlCell}">
                                <TextBox Margin="0,-5,0,0" Width="81" x:Name="FontSizeTextBox" Text="39" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" TextAlignment="Center" TextChanged="FontSizeTextBox_TextChanged"/>
                                <TextBlock FontSize="16" Margin="-2,-5,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="font size"/></TextBlock>
                            </StackPanel>
                            <!--Color of text-->
                            <StackPanel Style="{StaticResource ControlCell}" DoubleTap="Color_Image_Tap">
                                <Border Width="50" Height="50" Margin="0,10,0,10" Background="White">
                                    <Border x:Name="ColorBorder" Width="48" Height="48" Background="Black" BorderBrush="Black" BorderThickness="1">
                                        <Image Source="Resources/Images/color.png" Margin="0,0,0,0"  Width="48" Height="48"/>
                                    </Border>
                                </Border>
                                <TextBlock FontSize="16" Margin="-2,-8,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="color"/></TextBlock>
                            </StackPanel>

                            <!--Background Image-->
                            <StackPanel Style="{StaticResource ControlCell}" DoubleTap="Image_DoubleTap">
                                <Image Source="Resources/Images/image.png" Width="50" Height="50" Margin="15,10,15,8"/>
                                <TextBlock FontSize="16" Margin="0,-5,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="background"/></TextBlock>
                            </StackPanel>

                            <!--Font for text-->
                            <StackPanel DoubleTap="Font_StackPanel_Tap" Style="{StaticResource ControlCell}">
                                <Viewbox Width="50" Height="50" Margin="0,10,0,10" Stretch="Fill">
                                    <TextBlock Foreground="White" x:Name="FontFamilyTextBlock" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"  FontFamily="{StaticResource Font_VNI_Thufap2}" Text="A"/>
                                </Viewbox>
                                <TextBlock FontSize="16" Margin="-2,-5,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="font"/></TextBlock>
                                <TextBlock x:Name="IndexFontTextBlock" Visibility="Collapsed" Text="6"/>
                            </StackPanel>

                            <!---Add Text-->
                            <StackPanel Style="{StaticResource ControlCell}" DoubleTap="TextStackPanel_DoubleTap">
                                <Image Source="Resources/Images/textfield.png" Width="50" Margin="3,10,5,10" />
                                <TextBlock FontSize="16" Margin="-2,-12,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="text"/></TextBlock>
                            </StackPanel>
                            
                            <!---align-->
                            <StackPanel Margin="4,0,0,2" Background="{Binding ElementName=StackPanelFontSize, Path=Background}" Width="90" MinHeight="80">
                                <toolkit:ListPicker SelectionChanged="AlignListPicker_SelectionChanged" Margin="0,0,0,0" Width="57" x:Name="AlignListPicker"  SelectedIndex="2" HorizontalAlignment="Center" FlowDirection="LeftToRight" >
                                    <toolkit:ListPickerItem>
                                        <Image Margin="-2,0,0,0" Width="40" Source="Resources/Images/align_center.png"></Image>
                                    </toolkit:ListPickerItem>
                                    <toolkit:ListPickerItem>
                                        <Image Margin="-2,0,0,0" Width="40" Source="Resources/Images/align_full.png"></Image>
                                    </toolkit:ListPickerItem>
                                    <toolkit:ListPickerItem>
                                        <Image Margin="-2,0,0,0" Width="40" Source="Resources/Images/align_left.png"></Image>
                                    </toolkit:ListPickerItem>
                                    <toolkit:ListPickerItem>
                                        <Image Margin="-2,0,0,0" Width="40" Source="Resources/Images/align_right.png"></Image>
                                    </toolkit:ListPickerItem>
                                </toolkit:ListPicker>
                                <TextBlock FontSize="16" Margin="-2,0,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="align"/></TextBlock>
                            </StackPanel>
                            
                            <!--bold-->
                            <StackPanel DoubleTap="BoldStackPanel_DoubleTap" Style="{StaticResource ControlCell}">
                                <Border Name="BoldBorder" Style="{StaticResource SelectedBorderStyle}">
                                </Border>
                                <TextBlock Margin="0,-55,0,0" FontFamily="Times New Roman" Text="B" FontSize="55" FontWeight="ExtraBold" TextAlignment="Center"></TextBlock>
                                <TextBlock FontSize="16" Margin="-2,-8,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="bold"/></TextBlock>
                            </StackPanel>

                            <!--italic-->
                            <StackPanel DoubleTap="ItalicStackPanel_DoubleTap" Style="{StaticResource ControlCell}">
                                <Border Name="ItalicBorder" Style="{StaticResource SelectedBorderStyle}"/>
                                <TextBlock Margin="-6,-56,0,0" FontFamily="Times New Roman" Text="I" FontSize="55" FontWeight="ExtraBold" FontStyle="Italic" TextAlignment="Center"></TextBlock>
                                <TextBlock FontSize="16" Margin="-2,-8,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="italic"/></TextBlock>
                            </StackPanel>
                            <!--preview image-->
                            <!--<StackPanel Style="{StaticResource ControlCell}" DoubleTap="StackPanel_DoubleTap">
                                <Image Source="Resources/Images/previewImage.png" Width="50" Margin="5,10,5,10" />
                                <TextBlock FontSize="16" Margin="-2,-8,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="preview"/></TextBlock>
                            </StackPanel>-->

                            <!--export image-->
                            <!--<StackPanel Style="{StaticResource ControlCell}">
                                <Image Tap="Export_Image_Tap" Source="Resources/Images/appbar.download.rest.png" Width="80" Margin="0,-10,5,10" />
                                <TextBlock FontSize="16" Margin="-2,-20,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="export"/></TextBlock>
                            </StackPanel>-->

                            <!--Remove text-->
                            <StackPanel Style="{StaticResource ControlCell}" DoubleTap="RemoveStackPanel_DoubleTap">
                                <Image Source="Resources/Images/appbar.delete.rest.png" Width="80" Margin="0,-10,5,10" />
                                <TextBlock FontSize="16" Margin="-5,-28,3,0" HorizontalAlignment="Center" VerticalAlignment="Center"><Run Text="remove"/></TextBlock>
                            </StackPanel>
                        </StackPanel>
                    </ScrollViewer>
                </Grid>
            </Border>
        </StackPanel>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar BackgroundColor="{StaticResource PhoneAccentColor}" IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Resources/Images/previewIcon.png" Text="preview" Click="PreviewApplicationBarIconButton_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Resources/Images/appbar.save.rest.png" Text="save" Click="SaveApplicationBarIconButton_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Resources/Images/appbar.download.rest.png" Text="export" Click="ExportApplicationBarIconButton_Click"/>
        </shell:ApplicationBar>
        <!--<shell:ApplicationBar Mode="Minimized">
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>-->
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>